<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书库 - 图书资源网站</title>
    <style>
        @import url('topNav.css');
        @import url('common.css');
        @import url('middleNav.css');
        @import url('middleSite.css');
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* 图书库专属样式 */
        .bookstore-container {
            width: 80vw;
            margin: 30px auto;
            overflow: hidden; /* 清除浮动 */
        }

        /* 分类筛选区 */
        .category-filter {
            background-color: white;
            padding: 15px 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .category-title {
            font-size: 18px;
            color: #333;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .category-tags {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .category-tag {
            padding: 5px 15px;
            background-color: #f5f5f5;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .category-tag:hover, .category-tag.active {
            background-color: #00A4FF;
            color: white;
        }

        /* 图书列表 */
        .books-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 25px;
        }

        .book-card {
            background-color: white;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }

        .book-card:hover {
            transform: translateY(-5px);
        }

        .book-img {
            width: 100%;
            height: 250px;
            object-fit: cover; /* 保持图片比例 */
        }

        .book-info {
            padding: 15px;
        }

        .book-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .book-author {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }

        .book-desc {
            font-size: 13px;
            color: #888;
            line-height: 1.5;
            height: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3; /* 最多显示3行 */
            -webkit-box-orient: vertical;
        }

        .book-action {
            margin-top: 15px;
            text-align: center;
        }

        .view-detail {
            display: inline-block;
            padding: 8px 20px;
            background-color: #00A4FF;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
        }

        .view-detail:hover {
            background-color: #0080ff;
        }
    </style>
</head>
<body>
    <!-- 复用顶部导航 -->
    <div class="topNav">
        <div class="floatRight">
            <div class="topTitle">登录</div>
            <div class="topTitle">注册</div>
            <div class="topTitle">我的订单</div>
            <div class="topTitle">帮助中心</div>
            <div class="topTitle">在线客服</div>
            <div class="topTitle">手机版</div>
        </div>
    </div>

    <!-- 复用中间导航（带跳转链接） -->
    <div class="middleNav">
        <img src="2.png" class="floatLeft">
        <div class="middle">
            <a href="index.html" class="nav-link">首页</a>
            <a href="bookstore.html" class="nav-link">图书库</a>
            <a href="teaching-materials.html" class="nav-link">教学资料库</a>
            <a href="about.html" class="nav-link">关于我们</a>
            <div class="floatRight search">
                <div>
                    <input placeholder="请输入关键字"><button>搜索</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 图书库主体内容 -->
    <div class="bookstore-container">
        <!-- 分类筛选区 -->
        <div class="category-filter">
            <div class="category-title">图书分类</div>
            <div class="category-tags">
                <div class="category-tag active">全部图书</div>
                <div class="category-tag">小说</div>
                <div class="category-tag">科技</div>
                <div class="category-tag">教育</div>
                <div class="category-tag">历史</div>
                <div class="category-tag">哲学</div>
                <div class="category-tag">艺术</div>
            </div>
        </div>

        <!-- 图书列表 -->
        <div class="books-list">
            <!-- 图书1 -->
            <div class="book-card">
                <img src="book1.jpg" class="book-img" alt="图书封面">
                <div class="book-info">
                    <div class="book-title">《JavaScript高级程序设计》</div>
                    <div class="book-author">作者：尼古拉斯·泽卡斯</div>
                    <div class="book-desc">详细讲解JavaScript内部原理及高级特性，是前端开发者的经典参考书。</div>
                    <div class="book-action">
                        <a href="book-detail1.html" class="view-detail">查看详情</a>
                    </div>
                </div>
            </div>

            <!-- 图书2 -->
            <div class="book-card">
                <img src="book2.jpg" class="book-img" alt="图书封面">
                <div class="book-info">
                    <div class="book-title">《人类简史》</div>
                    <div class="book-author">作者：尤瓦尔·赫拉利</div>
                    <div class="book-desc">从认知革命、农业革命到科学革命，讲述人类如何从一个普通物种成为地球主宰。</div>
                    <div class="book-action">
                        <a href="book-detail2.html" class="view-detail">查看详情</a>
                    </div>
                </div>
            </div>

            <!-- 图书3 -->
            <div class="book-card">
                <img src="book3.jpg" class="book-img" alt="图书封面">
                <div class="book-info">
                    <div class="book-title">《活着》</div>
                    <div class="book-author">作者：余华</div>
                    <div class="book-desc">讲述一个人在大时代背景下的生存故事，探讨生命的意义与韧性。</div>
                    <div class="book-action">
                        <a href="book-detail3.html" class="view-detail">查看详情</a>
                    </div>
                </div>
            </div>

            <!-- 图书4 -->
            <div class="book-card">
                <img src="book4.jpg" class="book-img" alt="图书封面">
                <div class="book-info">
                    <div class="book-title">《三体》</div>
                    <div class="book-author">作者：刘慈欣</div>
                    <div class="book-desc">中国科幻文学的里程碑之作，讲述地球人类文明与三体文明的惊心动魄的第一次接触。</div>
                    <div class="book-action">
                        <a href="book-detail4.html" class="view-detail">查看详情</a>
                    </div>
                </div>
            </div>

            <!-- 图书5 -->
            <div class="book-card">
                <img src="book5.jpg" class="book-img" alt="图书封面">
                <div class="book-info">
                    <div class="book-title">《深度学习》</div>
                    <div class="book-author">作者：伊恩·古德费洛</div>
                    <div class="book-desc">深度学习领域的权威教材，涵盖神经网络、优化算法等核心内容。</div>
                    <div class="book-action">
                        <a href="book-detail5.html" class="view-detail">查看详情</a>
                    </div>
                </div>
            </div>

            <!-- 图书6 -->
            <div class="book-card">
                <img src="book6.jpg" class="book-img" alt="图书封面">
                <div class="book-info">
                    <div class="book-title">《艺术的故事》</div>
                    <div class="book-author">作者：贡布里希</div>
                    <div class="book-desc">从史前艺术到现代主义，梳理人类艺术发展的脉络，是艺术史入门经典。</div>
                    <div class="book-action">
                        <a href="book-detail6.html" class="view-detail">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 版权声明 -->
    <div class="copyright" style="background-color: #333; color: white; text-align: center; padding: 20px; margin-top: 50px;">
        <div class="copyright-content">
            <p>© 2023 图书资源网站 版权所有</p>
            <p>联系方式：contact@booksite.com | 备案号：XXICP备XXXXXXXX号</p>
        </div>
    </div>

    <script>
        // 分类标签点击效果
        const categoryTags = document.querySelectorAll('.category-tag');
        categoryTags.forEach(tag => {
            tag.addEventListener('click', () => {
                // 移除所有标签的active类
                categoryTags.forEach(t => t.classList.remove('active'));
                // 给当前点击的标签添加active类
                tag.classList.add('active');
                // 实际项目中可在此处添加筛选图书的逻辑
            });
        });
    </script>
</body>
</html>